
<template>
    <div>
        <el-dialog
          :title="this.$t('SubAccountManagementLang.Configure_warehouse')"
          :visible.sync="Visible"
          width="100%"
          fullscreen
          ref="configure_box"
          :close-on-click-modal="false"
          @close="cancel"
        >
            <div class="midContant clearfix">
                <div style="display: flex;height:100%;">
                    <div style="position: relative;display:flex;flex-direction: column;" :style="{ width: level_1_width + 'px',height:'100%' }">
                        <FilterBox
                          :labelWidth="120"
                          :filterItemList="filterItemList"
                          :filterData="filterData_level_1"
                          @search="search_level_1"
                          @clear="clear_level_1"
                          :buttonGroupArr="['search','clear']"
                        >
                        </FilterBox>
                        <MyTable
                            ref="SubAccountManagement_configure_table_level_1"
                            :gridOptions="{
                                checkboxConfig: { checkField: 'checked', trigger: 'row', highlight: true,reserve:true},rowConfig:{isCurrent: true, isHover: true,keyField:'id'}
                            }"
                            :tableColumn="tableColumn_level_1"
                            :tableData="tableData_level_1"
                            :isOrder="false"
                            @sendCheckBoxList="setCheckBox_level_1"
                            :CellOptionsArr="[{id:1,img:require('@/assets/img/add.png'),label:$t('common.batch_add')},{id:2,img:require('@/assets/img/del.png'),label:$t('common.select_true')},{id:3,img:require('@/assets/img/del.png'),label:$t('common.select_false')},]"
                            @cellClick="cellClick_level_1"
                        >
                            <template v-slot:content="scope">
                                <span>{{ scope.row[scope.config.prop] }}</span>
                            </template>
                        </MyTable>
                        <Pagination
                          :currentPage="pageinfo_level_1.page"
                          :pageSize="pageinfo_level_1.limit"
                          :total="pageinfo_level_1.number_all"
                          :page_all="pageinfo_level_1.page_all"
                          @pagination="SetPagination_level_1"
                          :isHaveBtn="false"
                        >
                        </Pagination>
                    </div>
                    <div :style="{ width: SeekBar_width + 'px' }" class="SeekBar" @mousedown="sum_block_ON_1"></div>
                    <div style="display:flex;flex-direction: column;" :style="{ width: level_2_width > 0 ? level_2_width + 'px' : 'unset', flex: level_2_width > 0 ? 'unset' : 1,height:'100%' }">
                      <FilterBox
                        :labelWidth="120"
                        :filterItemList="filterItemList"
                        :filterData="filterData_level_2"
                        @search="search_level_2"
                        @clear="clear_level_2"
                        :buttonGroupArr="['search','clear']"
                      >
                      </FilterBox>
                        <MyTable
                            ref="SubAccountManagement_configure_table_level_2"
                            :gridOptions="{
                                checkboxConfig: { checkField: 'checked', trigger: 'row', highlight: true,reserve:true},rowConfig:{isCurrent: true, isHover: true,keyField:'id'}
                            }"
                            :tableColumn="tableColumn_level_2"
                            :tableData="tableData_level_2"
                            :isOrder="false"
                            @sendCheckBoxList="setCheckBox_level_2"
                            :CellOptionsArr="[{id:1,img:require('@/assets/img/del.png'),label:$t('common.batch_del')},{id:2,img:require('@/assets/img/del.png'),label:$t('common.select_true')},{id:3,img:require('@/assets/img/del.png'),label:$t('common.select_false')},]"
                            @cellClick="cellClick_level_2"
                        >
                            <template v-slot:content="scope">
                                <span>{{ scope.row[scope.config.prop] }}</span>
                            </template>
                        </MyTable>
                        <Pagination
                          :currentPage="pageinfo_level_2.page"
                          :pageSize="pageinfo_level_2.limit"
                          :total="pageinfo_level_2.number_all"
                          :page_all="pageinfo_level_2.page_all"
                          @pagination="SetPagination_level_2"
                          :isHaveBtn="false"
                        >
                        </Pagination>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="confirm" size="small"
                >{{$t('common.confirm')}}</el-button
                >
                <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
            </span>
            
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        // 接收绑定参数
        midHight: [Number, String]
    },
    data() {
        return {
            Visible: false,
            uid: '',
            filterItemList:[
              // input输入框
              { label:this.$t('AddressManagementLang.address_code'),width:200, filterKey: 'code', filterType: 'SearchInput', placeholderStr: null },
              // input输入框
              { label:this.$t('AddressManagementLang.address_name'),width:200, filterKey: 'name', filterType: 'SearchInput', placeholderStr: null },
      ],
            filterData_level_1:{
              page: "",
              limit: "30",

              code: "",
              name: "",
            },
            tableColumn_level_1: [
                {
                    type: 'checkbox',
                    width: 40
                },
                {
                    checked: true,
                    label: this.$t('AddressManagementLang.address_code'),
                    prop: 'code',
                    width: 200
                },
                {
                    checked: true,
                    label: this.$t('AddressManagementLang.address_name'),
                    prop: 'name_current',
                }
            ],
            tableData_level_1: [],
            sendDataArr_level_1: [],
            pageinfo_level_1:{
              page: 1,
              page_all: 1,
              limit: 30,
              number_all: 0,
            },
            filterData_level_2:{
              page: "",
              limit: "30",

              code: "",
              name: "",
            },
            tableColumn_level_2: [
                {
                    type: 'checkbox',
                    width: 40
                },
                {
                    checked: true,
                    label: this.$t('AddressManagementLang.address_code'),
                    prop: 'code',
                    width: 200
                },
                {
                    checked: true,
                    label: this.$t('AddressManagementLang.address_name'),
                    prop: 'name_current',
                }
            ],
            tableData_level_2: [],
            sendDataArr_level_2: [],
            pageinfo_level_2:{
              page: 1,
              page_all: 1,
              limit: 30,
              number_all: 0,
            },
            rightWidth: 35, //右侧空白宽度
            level_1_width: 300, //默认宽度
            level_2_width: 300, //默认宽度
            level_min_width: 300, //数据组最小宽度
            SeekBar_width: 4, //拖动条宽度
            confirmTrue: true, //确定按钮保护
        };
    },
    created() {},
    mounted() {},
    deactivated() {},
    watch: {},
    methods: {
       
        init(data) {
            //监听盒子变化
            this.setWidth();
            window.addEventListener('resize', this.setWidth);
            window.addEventListener('mouseup', this.sum_block_NO);
            this.uid = data.uid;
            this.Visible = true;
            this.getCheckedDataList();
        },
        //获取初始未选中数据
        getCheckedDataList(){
          this.$get('getChildMemberAddress',{uid:this.uid}).then((res) => {
            this.noCheckedArr_level_1=res.data.start_address
            this.noCheckedArr_level_2=res.data.target_address
            this.getTableData_level_1();
            this.getTableData_level_2();
          })
        },
        //查询
        search_level_1(){
          this.getTableData_level_1()
        },
        //清空
        clear_level_1(){
          this.filterData_level_1.code= "",
          this.filterData_level_1.name= "",
          this.getTableData_level_1()
        },
        // 更改分页
        SetPagination_level_1(data){
          this.filterData_level_1.page=data.page
          this.filterData_level_1.limit=data.limit
          this.pageinfo_level_1.page=data.page
          this.pageinfo_level_1.limit=data.limit
          this.getTableData_level_1()
        },
        getTableData_level_1() {
          this.$get('addressList', this.filterData_level_1).then((res) => {
            this.tableData_level_1 = JSON.parse(JSON.stringify(res.data));
            if(this.tableData_level_1.length>0&&this.noCheckedArr_level_1.length>0){
              this.tableData_level_1.forEach(item=>{
                if(this.noCheckedArr_level_1.findIndex(ite=>{return item.id==ite})==-1){
                  this.sendDataArr_level_1.push(item)
                }
              })
            }else{
              this.sendDataArr_level_1=this.tableData_level_1
            }
            this.sendDataArr_level_1.forEach(item=>{
              this.$refs.SubAccountManagement_configure_table_level_1.$refs.tableRef.setCheckboxRow(item,true);
            })
            this.pageinfo_level_1=res.pageinfo;
            this.pageinfo_level_1.limit=Number(res.pageinfo.limit)
          });
        },
        //查询
        search_level_2(){
          this.getTableData_level_2()
        },
        //清空
        clear_level_2(){
          this.filterData_level_2.code= "",
          this.filterData_level_2.name= "",
          this.getTableData_level_2()
        },
        // 更改分页
        SetPagination_level_2(data){
          this.filterData_level_2.page=data.page
          this.filterData_level_2.limit=data.limit
          this.pageinfo_level_2.page=data.page
          this.pageinfo_level_2.limit=data.limit
          this.getTableData_level_2()
        },
        getTableData_level_2() {
            this.$get('addressList', this.filterData_level_2).then((res) => {
              this.tableData_level_2 = JSON.parse(JSON.stringify(res.data));
              if(this.tableData_level_2.length>0&&this.noCheckedArr_level_2.length>0){
              this.tableData_level_2.forEach(item=>{
                if(this.noCheckedArr_level_2.findIndex(ite=>{return item.id==ite})==-1){
                  this.sendDataArr_level_2.push(item)
                }
              })
            }else{
              this.sendDataArr_level_2=this.tableData_level_2
            }
            this.sendDataArr_level_2.forEach(item=>{
              this.$refs.SubAccountManagement_configure_table_level_2.$refs.tableRef.setCheckboxRow(item,true);
            })
              this.pageinfo_level_2=res.pageinfo;
              this.pageinfo_level_2.limit=Number(res.pageinfo.limit)
            });
        },
        setWidth() {
            this.$nextTick(()=>{
              let windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
              if(!this.$refs.configure_box){
                return
              }
            if (windowWidth > 630) {
              this.$refs.configure_box.$el.getElementsByClassName('el-dialog')[0].style.minWidth = 'unset';
                this.level_1_width = (windowWidth-this.SeekBar_width - this.rightWidth * 2) / 2, //默认宽度
                this.level_2_width = (windowWidth-this.SeekBar_width - this.rightWidth * 2) / 2;
            } else {
                this.$refs.configure_box.$el.getElementsByClassName('el-dialog')[0].style.minWidth = '610px';
                this.level_1_width = 300, //默认宽度
                    this.level_2_width = 300; //默认宽度
            }
            })
        },
        sum_block_ok_1(e) {
            let windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            if (e.clientX < this.level_min_width + this.rightWidth) {
                this.level_1_width = this.level_min_width;
            } else if (e.clientX > windowWidth - this.level_min_width - this.SeekBar_width - this.rightWidth) {
                this.level_1_width = windowWidth - this.level_min_width - this.SeekBar_width - this.rightWidth;
            } else {
                this.level_1_width = e.clientX - this.rightWidth;
            }
            this.level_2_width = windowWidth - this.SeekBar_width - this.level_1_width - this.rightWidth * 2;
        },
        sum_block_ON_1(e) {
            window.addEventListener('mousemove', this.sum_block_ok_1);
            document.body.style.userSelect = 'none'; //禁止选中文字
        },
        sum_block_NO() {
            window.removeEventListener('mousemove', this.sum_block_ok_1);
            document.body.style.userSelect = 'unset'; //取消禁止选中文字
        },
        setCheckBox_level_1(data) {
            this.sendDataArr_level_1 = data;
            let diff_ids=this.findDifferentIds(this.sendDataArr_level_1,this.tableData_level_1)  //未选中数据id集合
            this.noCheckedArr_level_1=this.noCheckedArr_level_1.filter(item=>{return this.tableData_level_1.findIndex(el=>{return el.id==item})==-1})
            this.noCheckedArr_level_1.push(...diff_ids)
        },
        setCheckBox_level_2(data) {
            this.sendDataArr_level_2 = data;
            let diff_ids=this.findDifferentIds(this.sendDataArr_level_2,this.tableData_level_2)  //未选中数据id集合
            this.noCheckedArr_level_2=this.noCheckedArr_level_2.filter(item=>{return this.tableData_level_2.findIndex(el=>{return el.id==item})==-1})
            this.noCheckedArr_level_2.push(...diff_ids)
        },
        // 寻找没选中数据
        findDifferentIds(arr1, arr2) {
          let set = new Set(arr1.map(item => item.id));
          let differentIds = arr2.filter(item => !set.has(item.id)).map(item => item.id);
          return differentIds;
        },
        cellClick_level_1(id) {
            if (id == 1) {
                if (this.sendDataArr_level_1.length > 0) {
                    this.tableData_level_2.unshift(...this.sendDataArr_level_1)
                    this.tableData_level_2.forEach(item=>{item.checked=false})
                    this.sendDataArr_level_1.forEach(item=>{
                      this.tableData_level_1=this.tableData_level_1.filter(el=>{return el.package_sn!==item.package_sn})
                    })
                } else {
                    this.$message.warning(this.$t('common.message_warn_text'));
                }
            } else if (id == 2) {
                this.tableData_level_1.forEach((item) => {
                    this.$refs.SubAccountManagement_configure_table_level_1.$refs.tableRef.setCheckboxRow(item,true);
                });
                this.sendDataArr_level_1=this.tableData_level_1.filter(item=>{return item.checked})
            } else if (id == 3) {
                this.$refs.SubAccountManagement_configure_table_level_1.$refs.tableRef.clearCheckboxRow();
                this.sendDataArr_level_1=[]
            }
        },
        cellClick_level_2(id) {
          if (id == 1) {
                if (this.sendDataArr_level_2.length > 0) {
                    this.tableData_level_1.unshift(...this.sendDataArr_level_2)
                    this.tableData_level_1.forEach(item=>{item.checked=false})
                    this.sendDataArr_level_2.forEach(item=>{
                      this.tableData_level_2=this.tableData_level_2.filter(el=>{return el.package_sn!==item.package_sn})
                    })
                } else {
                    this.$message.warning(this.$t('common.message_warn_text'));
                }
            } else if (id == 2) {
                this.tableData_level_2.forEach((item) => {
                    this.$refs.SubAccountManagement_configure_table_level_2.$refs.tableRef.setCheckboxRow(item,true);
                });
                this.sendDataArr_level_2=this.tableData_level_2.filter(item=>{return item.checked})
            } else if (id == 3) {
                this.$refs.SubAccountManagement_configure_table_level_2.$refs.tableRef.clearCheckboxRow();
                this.sendDataArr_level_2=[]
            }
        },
        // 提交修改
        confirm() {
            if (this.confirmTrue) {
                this.confirmTrue = false;
                window.setTimeout(() => {
                    this.confirmTrue = true;
                }, 1000);
                let params = new FormData();
                params.append('uid', this.uid);
                params.append('start_address', JSON.stringify(this.noCheckedArr_level_1));
                params.append('target_address', JSON.stringify(this.noCheckedArr_level_2));
                this.$postForm('saveChildMemberAddress', params).then((res) => {
                    this.confirmTrue = true;
                    if (res.success) {
                        this.$message.success(res.msg);
                        this.$emit('success');
                        this.cancel();
                    }
                });
            }
        },
        //取消修改
        cancel() {
          this.filterData_level_1={
              page: "",
              limit: "30",

              code: "",
              name: "",
            },
          this.tableData_level_1 = [];
          this.sendDataArr_level_1 = [];
          this.filterData_level_2={
              page: "",
              limit: "30",

              code: "",
              name: "",
            },
          this.tableData_level_2 = [];
          this.sendDataArr_level_2 = [];
          this.$refs.SubAccountManagement_configure_table_level_1.$refs.tableRef.clearCheckboxRow();
          this.$refs.SubAccountManagement_configure_table_level_2.$refs.tableRef.clearCheckboxRow();
          this.Visible = false;
          window.removeEventListener('resize', this.setWidth);
          window.removeEventListener('mouseup', this.sum_block_NO);
        },
    }
};
</script>

<style scoped lang="less" >
/deep/ .el-dialog__body{
  height: 100%;
}
.midContant {
    border: 0;
    width: 100%;
    height: 100%;
    // .tableBox{
    //   height: calc(100% - 110px);
    // }
}
.SeekBar {
    cursor: col-resize;
}
</style>